import React, { Component, createRef } from 'react'

export default class TodoInput extends Component {
    constructor() {
        super()
        this.state= {
            val: ''
        }
        this.inputVal = createRef()
    }
    inputValue = (e) => {
        // console.log(e.target.value)
        this.setState({
            val: e.target.value
        })    
    }
    inputValueHandler = () => {
        if(this.state.val ==='')
        return
        this.props.addList(this.state.val)
        this.setState({
            val:''
        })
        this.inputVal.current.focus()
    }
    keydownHandler = e => {
        if(e.keyCode===13){
            this.inputValueHandler()
        }      
    }
    render() {
        return (
            <div>
                <input type="text" 
                value={this.state.val} 
                onChange={this.inputValue}
                onKeyDown={this.keydownHandler}
                ref={this.inputVal}
                />&nbsp;&nbsp;
                <button onClick={this.inputValueHandler}>点击添加</button>
            </div>
        )
    }
}
